<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '收藏',
    navigationBarRightButton: {
      hide: true,
    },
  },
}
</route>
<template>
  <view
    class="w-full h-full bg-white overflow-hidden box-border"
    :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
  >
    <view class="w-full h-full pos-relative z-1">
      <wd-navbar @click-left="handleClickLeft">
        <template #title>
          <text class="text-gray-333 font-size-36 font-500">收藏</text>
        </template>
        <template #left>
          <wd-icon name="chevron-left" class="text-gray-333 font-size-44"></wd-icon>
        </template>
      </wd-navbar>
      <view class="w-full h-full p-x-28 p-y-32 home-content">
        <!-- 产品列表 -->
        <view class="mg-b-32">
          <view class="flex flex-wrap justify-between">
            <view
              class="flex justify-center flex-col mg-b-34 wr-336"
              v-for="(item, index) in productList"
              :key="index"
              @click="toProductDetail(item.id)"
            >
              <view class="w-full hr-336">
                <image width="100%" height="100%" :src="item.pic"></image>
              </view>
              <view class="font-size-28 mg-t-20 font-500 text-truncate">{{ item.name }}</view>
              <view class="flex justify-between flex-items-end mg-t-20">
                <view class="flex justify-start flex-items-end font-size-36 mt-1 text-red-1">
                  <view class="line-height-none font-size-24 mg-r-6 mg-b-4">¥</view>
                  <view class="line-height-none">
                    {{ item.price }}
                  </view>
                </view>
                <view class="font-size-24 text-gray-999">已售{{ item.buy_count }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { getCollects } from '@/service/my/my'

defineOptions({
  name: 'Collection',
})

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
// 产品列表
const productList: Ref<any[]> = ref([])
const toProductDetail = (id: number) => {
  uni.navigateTo({ url: '/pages/shopping/details' + '?id=' + id + '&type=0' })
}
const handleClickLeft = () => {
  uni.switchTab({ url: '/pages/home/person' })
}
onLoad(() => {
  getData()
})
const getData = () => {
  getCollects().then((res: any) => {
    productList.value = res.data.data
  })
}
</script>

<style scoped lang="scss">
.home-content {
  height: calc(100% - var(--wot-navbar-height, 88rpx));
  overflow: auto;
}
.menu-item {
  width: 112rpx;
  height: 112rpx;
  background: linear-gradient(180deg, #f6f2fe 0%, #ebebff 100%);
  border-radius: 56rpx;
}
.menu-icon {
  width: 88rpx;
  height: 88rpx;
  background-size: cover;
}
.image-item {
  width: 336rpx;
  height: 236rpx;
  background-size: cover;
}
.custom-count-down {
  display: inline-block;
  width: 44rpx;
  color: #fff;
  text-align: center;
  background-color: #f03131;
  border-radius: 2px;
}

.custom-count-down-colon {
  display: inline-block;
  margin: 0 4px;
  color: #f0883a;
}
.activity-image {
  height: 272rpx;
  background-size: 100% 100%;
}
.activity-title {
  color: #333;
}
// .text-underline {
//   text-decoration: line-through;
// }
.progress-box {
  box-sizing: border-box;
  height: 70rpx;
  padding-left: 28rpx;
  background: #f1f0f8;
  border-radius: 16rpx;
}
.progress-bar {
  position: relative;
  width: 284rpx;
  height: 20rpx;
  background: #dae0f3;
  border-radius: 10rpx;
  &-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #7195f8;
    border-radius: 10rpx;
  }
}
.progress-font {
  color: #7195f8;
}
.title-bg {
  width: 208rpx;
  height: 18rpx;
  background-size: 100% 100%;
  &-right {
    transform: rotateY(180deg);
  }
}
// .product-image {
//   width: 336rpx;
//   height: 336rpx;
//   background-size: 100% 100%;
// }
::v-deep .wd-search {
  padding: 0 !important;
  background: rgba(255, 255, 255, 0) !important;
}
::v-deep .wd-swiper__track {
  border-radius: 0;
}
</style>
